<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://static.91haoka.cn/vant.css" />
		<script src="https://static.91haoka.cn/vue.min.js"></script>
		<script src="https://static.91haoka.cn/vantall.js"></script>
		<script src="https://static.91haoka.cn/axios.min.js"></script>
		<link rel="stylesheet" type="text/css" href="https://static.91haoka.cn/all.css" />
		<script src="./js/q.js"></script>
		<script src="https://test91.91haoka.cn/html2canvas.min.js"></script>
		<script src="./js/qiniu.min.js"></script>
	</head>
	<style type="text/css">
		* {
			box-sizing: border-box;
			font-family: 'PingFang SC';
			font-size: 12px;
		}

		img {
			max-width: 100%;
		}

		.kflexbc {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.kflexc {
			display: flex;
			align-items: center;
		}

		.kflexcc {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.kflex {
			display: flex;
		}

		.li {
			color: rgb(102, 102, 102);
			font-size: 16px;
			font-weight: bold;
			margin-right: 0.3rem;
		}

		.liact {
			font-size: 20px;
			color: rgb(30, 30, 30);
			font-weight: bold;
			background: url('http://test91.91haoka.cn/1715304099tw650481.jpg') no-repeat center;
		}
	</style>
	<body>
		<div id="app" style="background: rgb(246, 250, 255);" v-cloak>
			<div style="padding: 0.3rem; background: rgb(246, 250, 255);" id="content">
				<div style="background: #fff; border-radius: 0.3rem;" v-show="ruleForm.share_template == 1">
					<div class="kflexcc">
						<img :src="ruleForm.share_img" style="width: 100%; border-radius: 0.3rem;">
					</div>
					<div class="kflexbc" style="padding: 0.3rem; background: #fff; border-radius:0 0 0.3rem 0.3rem;">
						<div style="flex-grow: 1;">
							<div style=" font-size: 0.28rem; line-height: 0.4rem; max-height: 0.8rem; overflow: hidden;"
								:style="{color:ruleForm.share_content_color}">
								{{ruleForm.share_content}}
							</div>
							<div class="kflexc" style="margin: 0.1rem 0 0.2rem;">
								<div style="margin-right: 10px;" class="kflexc"><img src="http://test91.91haoka.cn/1715235328uHZ50481.jpg"></div>
								<div style="font-size: 0.24rem; color: rgb(64, 66, 71);" class="kflexc">{{ruleForm.name}}</div>
							</div>
							<div style="font-size: 12px; color: #999; " class="kflexc">长按识别二维码进入下单链接</div>
						</div>
						<div>
							<div ref="qrcode" id="qrcode" style="width: 100px; margin-left: 20px;"></div>
						</div>
					</div>
				</div>

				<div style="background: #fff; border-radius: 0.3rem;" v-show="ruleForm.share_template == 2">
					<div class="kflexcc">
						<img :src="ruleForm.share_img" style="width: 100%; border-radius: 0.3rem;" ref="imgh">

						<div style="position: absolute; left: 0; width: 100%;" :style="{'top':topf}">
							<div class="kflexcc">
								<div ref="qrcode2" id="qrcode2" class="kflexcc"
									style="padding: 10px; width: 120px; background: #fff; border-radius: 0.15rem; margin: 0 auto;">
								</div>
							</div>
							<div style=" background: #fff; width: 3.2rem; margin: 0.1rem auto; text-align: center; font-size: 12px; padding: 0.05rem 0rem; border-radius: 0.2rem; color: rgb(175, 179, 188);">长按识别二维码进入下单链接</div>
						</div>

					</div>
					<div class="kflexbc" style="padding: 0.3rem;">

						<div>

							<div class="kflexc" style="margin: 10px 0;">
								<div style="margin-right: 10px;"><img
										src="http://test91.91haoka.cn/1715235328uHZ50481.jpg"></div>
								<div style="font-size: 0.28rem; color: rgb(64, 66, 71);" class="kflexc">{{ruleForm.name}}</div>
							</div>
							<div
								style=" font-size: 0.24rem; color: rgb(2, 12, 29); line-height: 0.4rem; " :style="{color:ruleForm.share_content_color}">
								{{ruleForm.share_content}}
							</div>
						</div>

					</div>
				</div>
			</div>



			<div class="kflexcc" style="margin-top: 30px;">
				<div @click="shengchengtupian()"
					style="width: 3.3rem; line-height: 0.8rem; border-radius: 20px; background: rgb(0, 90, 255); color: #fff; text-align: center; margin-right: 20px;">
					保存图片</div>
				<div @click="fuzhi()"
					style="width: 3.3rem; line-height:  0.8rem; border-radius: 20px; background: rgb(228, 237, 255); color: rgb(0, 90, 255);; text-align: center;">
					复制链接</div>
			</div>
		</div>


		<script>
			var h = document.documentElement.clientWidth / 7.5 + 'px';
			document.documentElement.style.fontSize = h;


			new Vue({
				el: '#app',
				data: function() {
					return {
						ruleForm: {

						},
						url: "",
						apis: "/apis",
						topf: "0"
					}
				},
				created() {
					if (location.host != 'localhost') {
						this.apis = ""
					}
					this.url = location.origin + '/webapp/weixiaodian/index.html?shop_id=' + this.getUrlParam('shop_id')

					axios.get(this.apis + '/api/plan-market/order-page/web/mini-store/info?shop_id=' + this.getUrlParam(
							'shop_id'))
						.then(response => {
							if (response.data.msg.code == 0) {
								this.ruleForm = response.data.data
								document.title = this.ruleForm.name


								if (this.ruleForm.share_img) {
									var that = this
									var img = new Image()
									img.src = that.ruleForm.share_img

									img.onload = function() {
										let h = img.height / (img.width / window.innerWidth)
										that.topf = (parseInt((h - 150)) / 2) + 'px'
									}
								}

							} else {
								vant.Toast(response.data.msg.info);
							}
						})
				},
				mounted() {
					var qrcode = new QRCode(document.getElementById("qrcode"), {
						text: this.url,
						width: 100,
						height: 100,
						colorDark: "#000000",
						colorLight: "#ffffff",
						correctLevel: QRCode.CorrectLevel.H
					});

					var qrcode = new QRCode(document.getElementById("qrcode2"), {
						text: this.url,
						width: 100,
						height: 100,
						colorDark: "#000000",
						colorLight: "#ffffff",
						correctLevel: QRCode.CorrectLevel.H
					});
				},
				methods: {
					fuzhi: function(text) {

						const clipboardData = window.clipboardData;
						if (clipboardData) {
							clipboardData.clearData();
							clipboardData.setData("Text", this.url);
							return true;
						} else if (document.execCommand) {
							const el = document.createElement("textarea");
							el.value = this.url;
							el.setAttribute("readonly", "");
							el.style.position = "absolute";
							el.style.left = "-9999px";
							document.body.appendChild(el);
							el.select();
							document.execCommand("copy");
							document.body.removeChild(el);
							vant.Toast('已复制');
							return true;
						}
						return false;
					},

					shengchengtupian: function() {
						var element2 = document.getElementById('content');
					
						html2canvas(element2, {
							useCORS: true, // 这个选项会自动处理跨域问题
							// scale: 1,//图片清晰度，越高越清楚，图片质量越大
							backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
						}).then(canvas => {
							let weixin = false
							
							var ua = window.navigator.userAgent.toLowerCase();
							if (ua.match(/micromessenger/i) == 'micromessenger') {
							     weixin = true
							}
							
							if(weixin){
								let img = canvas.toDataURL('image/jpeg')
								let blob = this.base64ToBlob(img)  // 转码
								this.uploadok(blob)
							}else{
								// 将图像添加到DOM中
								var a = document.createElement("a");
								        document.body.appendChild(a);
								        a.href = canvas.toDataURL('image/png');
								        a.download = "";
								        a.click();
							}
						});
					},



					getUrlParam: function(name) {
						var query = window.location.search.substring(1);
						var vars = query.split("&");
						for (var i = 0; i < vars.length; i++) {
							var pair = vars[i].split("=");
							if (pair[0] == name) {
								return pair[1];
							}
						}
						return (false);
					},
					
					base64ToBlob (code) {
					  let parts = code.split(';base64,');
					  let contentType = parts[0].split(':')[1];
					  let raw = window.atob(parts[1]);
					  let rawLength = raw.length;
					  let uInt8Array = new Uint8Array(rawLength);
					  for (let i = 0; i < rawLength; ++i) {
					    uInt8Array[i] = raw.charCodeAt(i);
					  }
					  return new window.Blob([uInt8Array], {type: contentType});
					},
					
					getRandomChar:function(len = 11)  {
					  var  x = "0123456789qwertyuioplkjhgfdsazxcvbnm" // 需要什么字符这里添加
					  var  tmp = ""
					  var timestamp = new Date().getTime();
					  for(var  i=0;i<len;i++)  {
					    tmp += x.charAt(Math.ceil(Math.random()*100000000)%x.length);
					  }
					  return  timestamp+tmp;
					},
					//上传文件
					uploadok: function(file,fileList) {
						let name = this.getRandomChar()
						
						var that = this
						axios.get(this.apis + `/api/system/qiniu/upload_token2`,{
							params:{bucket:'test91'}
						})
						.then(response => {
					      if(response.data.msg.code == 0){
					        const observer = {
					          next(res){},
					          error(err){},
					          complete(res){
								location.href = 'https://test91.91haoka.cn/'+ res.data
					          }
					        }
					        const observable = qiniu.upload(file,name, response.data.data, {}, {})
					        const subscription = observable.subscribe(observer) // 上传开始
					      }else{
							  vant.Toast(response.data.msg.info);
					      }
					    });
					},
				}
			});
		</script>
	</body>
</html>